<!-- 「欢乐赛积分明细」页面 -->
<template>
    <div class="page">
        <uni-nav-bar fixed statusBar :border="false">
            <div class="navigation-title">五一欢乐赛积分</div>
        </uni-nav-bar>
        <div class="container">
            <div class="main-wrapper">
                <div class="bangdan-button" @click="onRankClick">查看榜单</div>
                <div class="display-wrapper">
                    <image class="coin-img" mode="scaleToFill"
                        src="https://ustatic.hudongmiao.com/miao/activity/202505/bigcoin.png">
                    </image>
                    <div class="my-score">
                        <div class="number">{{ activity202505Store.personalPeakCompetitionInfo?.score || 0 }}</div>
                        <div class="text">我的积分</div>
                    </div>
                </div>
                <div class="display-wrapper2">
                    <div class="score">
                        <text class="text">今日获得积分：</text>
                        <text class="number">{{ activity202505Store.personalPeakCompetitionInfo?.todayScore || 0
                            }}</text>
                    </div>
                    <div class="score">
                        <text class="text">本周获得积分：</text>
                        <text class="number">{{ activity202505Store.personalPeakCompetitionInfo?.weekScore || 0
                            }}</text>
                    </div>
                </div>
            </div>
            <div class="detail-wrapper">
                <div class="detail">
                    <div class="title">
                        <image class="title-image"
                            src="https://ustatic.hudongmiao.com/miao/activity/202505/starDecorationLeft.png"
                            mode="scaleToFill" />
                        <text class="title-text">积分明细</text>
                        <image class="title-image"
                            src="https://ustatic.hudongmiao.com/miao/activity/202505/starDecorationRight.png"
                            mode="scaleToFill" />
                    </div>
                    <div class="detail-list">
                        <div class="detail-item"
                            v-for="item in activity202505Store.personalPeakCompetitionScoreDetailList" :key="item.id">
                            <div class="item-title"> {{ item.title + item.flowText }}</div>
                            <div class="item-right">
                                <text class="number">{{ item.scoreText }}</text>
                                <text class="time">{{ item.time }}活动</text>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <ToLoginMask v-if="!isLogin" />
    <CustomTabBar />
</template>

<script setup lang="ts">
import CustomTabBar from "@/components/CustomTabBar.vue";
import ToLoginMask from "@/components/ToLoginMask.vue";
import { useActivity202505 } from "@/stores/activity-202505-store";
import { useUser } from "@/stores/user";
import { navigateTo } from '@/utils/navigate';
const activity202505Store = useActivity202505();
const { personInfo202310 } =
  storeToRefs(activity202505Store);
const user = useUser();
const { userInfo, isLogin } = storeToRefs(user);

const onRankClick = ()=>{
    navigateTo('rank2025')
}

onShow(async ()=>{
    await activity202505Store.setIsSignedIn()
    await activity202505Store.setPersonalPeakCompetitionRankList()
    activity202505Store.resetPersonalPeakCompetitionScoreDetailList()
    await activity202505Store.setPersonalPeakCompetitionScoreDetailList()
    while(activity202505Store.personalPeakCompetitionScoreDetailList.length<activity202505Store.personalPeakCompetitionScoreDetailPagination.total){
        await activity202505Store.setPersonalPeakCompetitionScoreDetailList()
    }
    // console.log("activity202505Store.personalPeakCompetitionScoreDetailList",activity202505Store.personalPeakCompetitionScoreDetailList)
})

</script>

<style scoped lang="scss">
.page {

    position: relative;

    width: 750rpx;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: #F4F8FE;

    @media (min-aspect-ratio: 380/812) {
        min-height: 120vh;
    }

    @media (min-aspect-ratio: 330/568) {
        min-height: 150vh;
    }


    // 隐藏滚动条
    &::-webkit-scrollbar {
        display: none;
    }



    .navigation-title {
        width: 100%;
        font-size: 34rpx;
        display: flex;
        justify-content: center;
        margin-bottom: 12rpx;
        align-items: center;
        font-weight: bold;
    }



    .container {
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        margin-bottom: 150rpx;

        @media (min-aspect-ratio: 380/812) {
            margin-bottom: 200rpx;
        }
        
        @media (min-aspect-ratio: 330/568) {
            margin-bottom: 300rpx;
        }

        .main-wrapper {
            width: 716rpx;
            height: 350rpx;
            position: relative;
            // background: linear-gradient(180deg, #FE933C 0%, #FAA838 59%, #FFC77A 100%);
            background-image: url('https://ustatic.hudongmiao.com/miao/activity/202505/scorebg.png');
            background-size: 100% 100%;
            display: flex;
            flex-direction: column;
            justify-content: justify-content;
            align-items: center;
            border-radius: 22rpx 22rpx 22rpx 22rpx;

            .bangdan-button {
                position: absolute;
                right: 0rpx;
                top: 50rpx;
                width: 142rpx;
                height: 44rpx;
                border-radius: 27rpx 0px 0px 27rpx;
                background-color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 26rpx;
                color: #F8A15B;
            }

            .display-wrapper {
                width: 700rpx;
                margin-top: 100rpx;
                margin-bottom: 60rpx;
                display: flex;
                justify-content: center;
                align-items: center;

                .coin-img {
                    width: 75rpx;
                    height: 84rpx;
                }

                .my-score {
                    height: 95rpx;
                    position: relative;
                    display: flex;
                    margin-left: 20rpx;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: flex-start;

                    .number {
                        font-weight: 700;
                        height: 37rpx;
                        font-size: 52rpx;
                        color: #FFFFFF;
                        line-height: 37rpx;
                        text-align: center;
                        font-style: normal;
                        text-transform: none;
                    }

                    .text {
                        height: 37rpx;
                        font-weight: 500;
                        font-size: 30rpx;
                        color: #FFFFFF;
                        line-height: 37rpx;
                        text-align: center;
                        font-style: normal;
                        text-transform: none;
                    }


                }
            }

            .display-wrapper2 {
                width: 700rpx;
                margin-top: 20rpx;
                display: flex;
                justify-content: center;
                align-items: center;

                .score {
                    width: 350rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .text {
                        height: 37rpx;
                        font-weight: 500;
                        font-size: 30rpx;
                        color: #FFFFFF;
                        line-height: 37rpx;
                        text-align: left;
                        font-style: normal;
                        text-transform: none;
                    }

                    .number {
                        height: 37rpx;
                        font-weight: 700;
                        font-size: 34rpx;
                        color: #FFF29F;
                        line-height: 37rpx;
                        text-align: left;
                        font-style: normal;
                        text-transform: none;
                    }
                }

                .score:nth-child(1) {
                    border-right: 1px solid #fff;
                }

            }

        }

        .detail-wrapper {
            margin-top: 30rpx;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            .detail {
                width: 716rpx;
                min-height: 924rpx;
                background-color: #fff;
                border-radius: 22rpx 22rpx 22rpx 22rpx;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;

                .title {
                    width: 680rpx;
                    height: 36rpx;
                    margin-top: 50rpx;
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: flex-start;

                    .title-image {
                        margin-top: 10rpx;
                        width: 233rpx;
                        height: 21rpx;
                    }

                    .title-text {
                        width: 151rpx;
                        height: 37rpx;
                        margin-left: 15rpx;
                        margin-right: 15rpx;
                        font-size: 34rpx;
                        font-weight: bold;
                        line-height: 37rpx;
                        text-align: center;
                        color: #F8A15B;
                    }

                }

                .detail-list {
                    width: 680rpx;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: center;

                    .detail-item {
                        width: 640rpx;
                        min-height: 140rpx;
                        padding-left: 25rpx;
                        padding-right: 25rpx;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        // margin-top: 20rpx;
                        border-bottom: 1px solid #E4E4E4;

                        .item-title {
                            width: 330rpx;
                            height: 74rpx;
                            display: flex;
                            align-items: center;
                            justify-content: flex-start;
                            font-family: Source Han Sans, Source Han Sans;
                            font-weight: 400;
                            font-size: 28rpx;
                            color: #000000;
                            line-height: 37rpx;
                            font-style: normal;
                            text-transform: none;
                        }

                        .item-right {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: flex-end;

                            .number {
                                height: 37rpx;
                                font-weight: 700;
                                font-size: 34rpx;
                                color: #F68225;
                                line-height: 37rpx;
                                text-align: left;
                                font-style: normal;
                                text-transform: none;
                            }

                            .time {
                                height: 37rpx;
                                font-weight: 400;
                                font-size: 21rpx;
                                color: #8D8D8D;
                                line-height: 37rpx;
                                text-align: right;
                                font-style: normal;
                                text-transform: none;
                            }
                        }
                    }
                }
            }
        }

    }


}
</style>
